<template>
	<div class="add-node-btn-box">
		<div class="add-node-btn">
			<el-popover :ref="'pop'" placement="right-start" :width="266" trigger="click" :hide-after="0"
				:show-after="0">
				<template #reference>
					<el-button type="primary" icon="el-icon-plus" circle></el-button>
				</template>
				<div class="add-node-popover-body">
					<ul>
						<li>
							<el-icon style="color: #3794ff;" @click="addType('action')"><el-icon-promotion /></el-icon>
							<p>插件</p>
						</li>
						<li>
							<el-icon style="color: #15BC83;" @click="addType('switch')"><el-icon-share /></el-icon>
							<p>条件分支</p>
						</li>
						<li>
							<el-icon style="color:#60c5c5 ;" @click="addType('code')"><el-icon-edit /></el-icon>
							<p>代码</p>
						</li>
						<li>
							<el-icon style="color: #2b74ff;" @click="addType('delay')"><el-icon-alarm-clock /></el-icon>
							<p>延迟执行</p>
						</li>
						<!--
						<li>
							<el-icon style="color: #299240;" @click="addType('batch')"><el-icon-refresh /></el-icon>
							<p>批处理</p>
						</li>
						<li>
							<el-icon style="color: #eaab10;" @click="addType('if')"><el-icon-open /></el-icon>
							<p>执行条件</p>
						</li>



						<li>
							<el-icon style="color: #eaab10;" @click="addType('if')"><el-icon-open /></el-icon>
							<p>执行条件</p>
						</li>
						<li>
							<el-icon style="color: red;" @click="addType('stop')"><el-icon-circle-close /></el-icon>
							<p>终止</p>
						</li>
						<li>
							<el-icon style="color: #2b74ff;" @click="addType('delay')"><el-icon-alarm-clock /></el-icon>
							<p>延迟执行</p>
						</li>

						-->
					</ul>
				</div>
			</el-popover>
		</div>
	</div>
</template>

<script>
	export default {
		inject: ['select', 'getNodeName'],
		props: {
			modelValue: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {

			}
		},
		mounted() {

		},
		methods: {
			str_random(length) {
				const base58 = "123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz";
				let result = "";
				for (let i = 0; i < length; i++) {
					result += base58.charAt(Math.floor(Math.random() * base58.length));
				}
				return result;
			},
			addType(type) {
				var id = `${type}_${this.str_random(8)}`;
				var node = {}
				if (type == 'action') {

					return this.select("plugin", (e) => {

						console.error("添加")

						node = {
							id: id,
							name: this.getNodeName("短信群发"),
							type: type,
							metadata: {
								plugin_name: "短信群发",
							},
							childNode: this.modelValue
						}

						this.$emit("update:modelValue", node)
					})

				} else if (type == 'code') {
					node = {
						id: id,
						name: this.getNodeName("代码执行"),
						type: type,
						metadata: {
							icon: "",
							description: "编写代码，处理输入变量来生成返回值",
						},
						properties: {
							type: "javascript",
							settingOnError: {
								switch: false,
								dataOnErr: {

								}
							},
							code: `// 在这里，您可以通过 ‘params’  获取节点中的输入变量，并通过 'ret' 输出结果
// 'params' 和 'ret' 已经被正确地注入到环境中
// 下面是一个示例，获取节点输入中参数名为‘username’和‘password’的值：
// const { username, password } = params;
// 下面是一个示例，输出一个包含多种数据类型的 'ret' 对象：
// const ret = { "name": ‘小明’, "hobbies": [“看书”, “旅游”] };

/**
 * @function main 入口函数
 * @param {string} username 用户名 - 请输入用户名
 * @param {string} password 密码 - 请输入密码
 * @returns {string} key0
 * @returns {array<string>} key1
 * @returns {object} key2
 * @returns {string} key2.key21
 */
function main( params ) {

	var { username, password } = params;

	// 构建输出对象
	const ret = {
		"key0": username + "|" + password, // 拼接字符串
		"key1": ["hello", "world"], // 输出一个数组
		"key2": { // 输出一个Object
			"key21": "hi"
		},
	};

	return ret;

}




`,
						},


						childNode: this.modelValue
					}
				} else if (type == 'return') {
					node = {
						id: id,
						name: "返回",
						type: type,
						childNode: this.modelValue
					}
				} else if (type == 'batch') {
					node = {
						id: id,
						name: this.getNodeName("批处理"),
						type: type,
						childNode: this.modelValue,
						loopNode: {
							childNode: {}
						}
					}
				} else if (type == 'stop') {
					node = {
						id: id,
						namename: "结束",
						type: type,
						childNode: this.modelValue
					}
				} else if (type == 'delay') {
					node = {
						id: id,
						name: "延迟执行",
						type: type,
						childNode: this.modelValue
					}
				} else if (type == 'if') {
					node = {
						id: id,
						name: "",
						type: type,
						childNode: this.modelValue,
						ifNode: {
							childNode: {}
						},
						inputs: {
							conditionList: [
								[{
									name: "条件1",
									type: "case",
									priorityLevel: 1,
									conditionMode: 1,
									conditionList: []
								}],
							]
						}
					}
				} else if (type == 'switch') {
					node = {
						id: id,
						name: this.getNodeName("条件分支"),
						type: type,
						metadata: {
							icon: "",
						},
						conditionNodes: [{
								id: `${id}_case_${this.str_random(8)}`,
								name: "条件1",
								type: "case",
								properties: {
									isFirst: true,
									expression: "",
									isBreak: false,
									switchGroup: `${id}`
								}
							},
							{
								id: `${id}_default`,
								name: "默认条件",
								type: "default",
								properties: {
									isDefault: true,
									switchGroup: `${id}`
								}
							}
						],
						childNode: this.modelValue
					}

				}
				this.$emit("update:modelValue", node)
				this.$refs.pop.hide()
			}
		}
	}
</script>

<style>
</style>
